import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class BigPopularLiveRoom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 50.h),
        SizedBox(
          height: 399.h,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            padding: EdgeInsets.symmetric(horizontal: 32.w),
            itemCount: 8,
            itemBuilder: (context, index) {
              return Container(
                width: 300.w,
                margin: EdgeInsets.only(right: 24.w),
                child: Column(
                  children: [
                    Container(
                      width: 300.w,
                      height: 300.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.r),
                      ),
                      child: Stack(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(16.r),
                            child: const Image(
                              image: AssetImage(
                                  'assets/images/big_popular_live_girl.png'),
                              width: double.infinity,
                              height: double.infinity,
                              fit: BoxFit.cover,
                              alignment: Alignment.center,
                            ),
                          ),
                          Positioned(
                            right: 16.w,
                            bottom: 16.h,
                            child: Container(
                              padding: EdgeInsets.symmetric(
                                horizontal: 16.w,
                                vertical: 4.h,
                              ),
                              decoration: BoxDecoration(
                                color: Colors.black.withOpacity(0.5),
                                borderRadius: BorderRadius.circular(30.r),
                              ),
                              child: Row(
                                children: [
                                  Icon(
                                    Icons.favorite,
                                    color: Colors.white,
                                    size: 24.sp,
                                  ),
                                  SizedBox(width: 4.w),
                                  Text(
                                    '${index + 1}.2M',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 24.sp,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 16.h),
                    Container(
                      width: 300.w,
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            [
                              'Bryce Adams',
                              'Emma Stone',
                              'Lucy Liu',
                              'Anna May'
                            ][index % 4],
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 32.sp,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          // SizedBox(height: 8.h),
                          Text(
                            '@${[
                              'fitiajidjisd',
                              'emmastone',
                              'lucyliu',
                              'annamay'
                            ][index % 4]}',
                            style: TextStyle(
                              color: Colors.grey,
                              fontSize: 24.sp,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}
